<script>
import {defineComponent} from 'vue'
import UInput from "../../../uni_modules/uview-ui/components/u--input/u--input.vue";
import UButton from "../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import ModuleCard from "../module-card/index.vue";
import UForm from "../../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import {STATION_STATUS_LIST} from "../../../pages/index/home/constant/power-station";
import {getUserInfoApi} from "../../../api/common/user";
import {getProjectListApi} from "../../../api/common/product";
import store from "../../../store";
import USearch from "../../../uni_modules/uview-ui/components/u-search/u-search.vue";

export default {
  name: "search-bar",
  components: {UFormItem, UForm, UButton, UInput, ModuleCard, USearch},
  props: {
    statusList: {
      type: Array,
      default: () => STATION_STATUS_LIST,
    },
    showStatusList: {
      type: Boolean,
      default: true,
    },
    kw: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      keyword: '',
      show: false,
      formData: {},
      status: [],
      code: '',
      projectList: [],
    }
  },
  mounted() {
    this.getProjectList();
    this.keyword = this.$props.kw;
    if (this.kw) {
      this.submit();
    }
  },
  watch: {
    kw(val) {
      this.keyword = val;
    }
  },
  methods: {
    // 状态点击事件
    statusClick(item) {
      const index = this.status.indexOf(item.value);
      if (index > -1) {
        this.status.splice(index, 1);
      } else {
        this.status.push(item.value);
      }
    },
    // 产品编码点击事件
    codeClick(item) {
      if (this.code === item.code) {
        this.code = '';
      } else {
        this.code = item.code;
      }
    },
    async getProjectList(){
      const { user } = await store.dispatch("user/getInfo");
      console.log(user, 12347)
      const { data } = await getProjectListApi({ userId: user.userId, type: 1 });
      this.projectList = data;
    },
    submit(){
      this.$emit('change', {
        status: this.status,
        code: this.code,
        keyword: this.keyword,
      });
      this.show = false;
    }
  }
}
</script>

<template>
  <view class="search-bar">
    <view class="cell">
      <view class="cell-bd">
<!--        <u-input-->
<!--            placeholder="请输入查询内容"-->
<!--            prefixIcon="search"-->
<!--            shape="circle"-->
<!--            prefixIconStyle="font-size: 22px;color: #909399"-->
<!--        ></u-input>-->
        <u-search
            placeholder="搜索业主姓名"
            v-model="keyword"
            clearabled
            shape="round"
            :showAction="false"
            @blur="submit"
        ></u-search>
      </view>
      <view class="cell-ft btn">
        <u-button
            type="primary"
            icon="grid-fill"
            shape="circle"
            text="筛选"
            size="small"
            color="#137696"
            @click="show = true"
        ></u-button>
      </view>
    </view>
    <u-popup :show="show" :round="10" mode="right" @close="show = false">
      <view class="popup">
        <u--form
            labelPosition="top"
            :model="formData"
            ref="uForm"
            labelWidth="100px"
            :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
        >
          <module-card title="条件筛选">
            <template slot="title-right">
              <u-button
                  type="primary"
                  size="mini"
                  color="#d8b387"
                  @click="submit"
              >确定</u-button>
            </template>
            <u-form-item
                label="产品编码"
                prop="formData.field"
                ref="item1"
            >
              <view>
                <view
                    class="check-item"
                    :class="code === item.code ? 'checked' : ''"
                    v-for="item in projectList"
                    @click="codeClick(item)"
                >{{item.code}}</view>
              </view>
            </u-form-item>
            <u-form-item
                label="状态"
                prop="formData.field"
                ref="item2"
                v-if="showStatusList"
            >
                <view>
                  <view
                      class="check-item"
                      :class="status.includes(item.value) ? 'checked' : ''"
                      v-for="item in statusList"
                      @click="statusClick(item)"
                  >{{item.label}}</view>
                </view>
            </u-form-item>
          </module-card>
        </u--form>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.search-bar{
  background: #fff;
  padding: 8px;
  border-radius: 4px;
}
.cell{
  margin-top: 0px;
}
.btn{
  padding-left: 10px;
}
.popup{
  width: 90vw;
}
.check-item{
  padding: 5px 10px;
  border-radius: 5px;
  //background-color: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #eee;
  margin: 5px;
  min-width: 90px;
  text-align: center;
  &.checked{
    background: rgb(16, 178, 141);
    color: #fff;
    border: 1px solid rgb(16, 178, 141);
  }
  &:active{
    background-color: #fff;
    color: rgb(16, 178, 141);
    border: 1px solid rgb(16, 178, 141);
  }
}
</style>
